import React from 'react';
import { Input } from 'antd';

interface FormJsonEditorProps {
  value?: string;
  onChange?: (value: string) => void;
}

const FormJsonEditor: React.FC<FormJsonEditorProps> = ({ value, onChange }) => {
  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    const newValue = e.target.value;
    try {
      // 尝试解析 JSON 以验证格式
      JSON.parse(newValue);
      onChange?.(newValue);
    } catch (error) {
      // 如果解析失败，仍然更新值，但可以在这里添加错误提示
      onChange?.(newValue);
    }
  };

  const formatValue = (val?: string): string => {
    if (!val) return '';
    try {
      return JSON.stringify(JSON.parse(val), null, 2);
    } catch {
      return val;
    }
  };

  return (
    <Input.TextArea
      value={formatValue(value)}
      onChange={handleChange}
      autoSize={{ minRows: 4, maxRows: 10 }}
      placeholder="请输入 JSON 格式的数据"
    />
  );
};

export default FormJsonEditor; 